<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="/css/user.css"/>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>

    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>

<div id="app">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <input type="text" v-model="page.pageString" placeholder="请输入要查询的姓名"/><input type="button" @click="pageQuery" value="查询"/>
        </tr>
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>真实姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>删除操作</th>
        </tr>
        <tr v-for="user in userList">
            <td>{{user.id}}</td>
            <td>{{user.username}}</td>
            <td>{{user.password}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.birthday}}</td>
            <td><button @click="deleteUserById(user.id)">删除</button></td>
        </tr>
    </table>

    <div align="left">
        <!--分页功能:
            background: 分页按钮的背景色
            @current-change="pageChange" 页码发生变化时, @=v-on: 触发current-change 事件,执行pageChange函数
            current-page  当前页码
            page-size  每页显示记录数
            total  总记录数

        -->

        <el-pagination
            background
            @current-change="pageChange"
            :current-page="page.currentPage"
            :page-size="page.pageSize"
            layout="prev,pager,next,jumper"
            :total="page.total"
        >
        </el-pagination>

    </div>
</div>
</body>
<script>
    //定义vue对象
    let vue=new Vue({
        //获取div对象
        el:"#app",
        data:{
            userList:[],
            page:{
                currentPage:1,//页码值
                pageSize:2,//每页展示数量
                total:null, //总数量
                pageString:null //模糊查询的搜索条件
            }
        },
        created(){
           /*//提交ajax请求
           axios.get("/user/findAllUser.do").then((res)=>{
                //console.log(res);
                //this.userList=res.data;
           })*/
           //vue对象创建完成就调用此方法
           this.pageQuery();
        },
        methods:{
            pageChange(currentPage){
                //将传入的页码值赋值给当前vue对象中的page.currentPage值
                this.page.currentPage=currentPage;
                //调用查询数据的方法
                this.pageQuery();
            },
            //分页查询
            pageQuery(){
                //alert(this.page.queryString);
                //异步提交
                axios.post("/user/pageQuery.do",this.page).then((result)=>{
                    //将查询到的总页数赋值给 vue对象的总页数
                    this.page.total=result.data.total;
                    //将查询到的页面数据复制给 userList
                    this.userList=result.data.userList;
                })
            },
            deleteUserById(id){
                this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/user/deleteUserById.do?id="+id).then(()=>{
                        //将页码值改为1,重新调用一下查询函数
                        this.page.currentPage=1;
                        this.pageQuery();

                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

        }
    })
</script>
</html>